<template>
	<!-- <page-meta :page-style="themeColor"></page-meta> -->
	<view class="member-level">
		<view class="level-top">
			<image src="/static/level-top-bg.png"></image>
		</view>
		<view class="banner-container">
			<view class="memberInfo" v-if="memberInfo">
				<image :src="memberInfo.headimg"  mode="aspectFill"></image>
				<view class="member-desc">
					<view class="font-size-base">{{ memberInfo.nickname }}</view>
					<view class="font-size-activity-tag">当前等级：{{ memberInfo.level_name }}</view>
				</view>
				<!-- <view class="growth-rules font-size-tag" @click="growthRules">
					成长规则
				</view> -->
			</view>
			<swiper :style="{ width: '100vw', height: '390rpx' }" class="margin-bottom"
				:indicator-dots="swiperConfig.indicatorDots" :indicator-color="swiperConfig.indicatorColor"
				:indicator-active-color="swiperConfig.indicatorActiveColor" :autoplay="false"
				:interval="swiperConfig.interval" :duration="swiperConfig.duration" :circular="swiperConfig.circular"
				:previous-margin="swiperConfig.previousMargin" :next-margin="swiperConfig.nextMargin"
				@change="swiperChange" @animationfinish="animationfinish" :current="curIndex">
				<swiper-item :class="levelList.length == 1 ? 'image-container-box' : ''" v-for="(item, i) in levelList" :key="i">
					<view class="image-container" :class="[
							curIndex === 0
								? i === listLen - 1
									? 'item-left'
									: i === 1
									? 'item-right'
									: 'item-center'
								: curIndex === listLen - 1
								? i === 0
									? 'item-right'
									: i === listLen - 2
									? 'item-left'
									: 'item-center'
								: i === curIndex - 1
								? 'item-left'
								: i === curIndex + 1
								? 'item-right'
								: 'item-center'
						]">
						<view class="slide-image" style="background-size: 100% 100%;background-repeat:no-repeat" :style="{
								transform: curIndex === i ? 'scale(' + scaleX + ',' + scaleY + ')' : 'scale(1,1)',
								transitionDuration: '.3s',
								transitionTimingFunction: 'ease'
							}">
							<image  :style="{backgroundColor:levelList[curIndex]['bg_color']}"/>
							<view class="info">
								<view class="level-detail" :style="{color:levelList[curIndex]['level_text_color']}">
									{{ levelList[curIndex].name}}
									<text class="isnow " :style="{color:levelList[curIndex]['level_text_color']}" v-if="levelId == item.id">当前等级</text>
								</view>
								<view class="growr-name" :style="{color:levelList[curIndex]['level_text_color']}">当前成长值</view>
								<view class="growr-value" :style="{color:levelList[curIndex]['level_text_color']}">{{ growth }}</view>
								<image :src="item.logo" mode="" style="width: 80rpx;height: 80rpx;position: absolute;right: 20rpx;top:20rpx;"></image>
								<block v-if="levelId == item.id">
									<block v-if="levelList[curIndex + 1] != undefined">
										<ns-progress :progress="item.rate"></ns-progress>
										<view class="residue-growr-value" :style="{color:levelList[curIndex]['level_text_color']}">
											再消费{{ item.needGrowth > 0 ? item.needGrowth : 0 }}升级为{{item.last_level_name}}
										</view>
									</block>
									<block v-else>
										<view class="residue-growr-value" :style="{color:levelList[curIndex]['level_text_color']}">您现在已经是最高等级</view>
									</block>
								</block>
								<block v-else>
									<ns-progress :progress="item.rate" v-if="item.needGrowth > 0"></ns-progress>
									<view class="residue-growr-value" v-if="item.needGrowth > 0&&item.last_upgrade_amount!=item.upgrade_amount" :style="{color:levelList[curIndex]['level_text_color']}">
										再消费{{ item.needGrowth }}升级为{{item.last_level_name}}
									</view>
									<view class="residue-growr-value" v-if="item.needGrowth > 0&&item.last_upgrade_amount==item.upgrade_amount" :style="{color:levelList[curIndex]['level_text_color']}">
										最高等级{{ item.name}}
									</view>
								</block>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="member-gift">
				<view class="gift-title">会员礼包</view>
				<view class="gift-itme" v-if="levelList[curIndex].balance2!=0">
					<image src="/static/integral.png" mode="aspectFit"></image>
					<view class="gift-content active">
						<text>礼品卡礼包</text>
						<text class="gift-desc">签到成功赠送{{levelList[curIndex].balance2}}张礼品卡</text>
					</view>
				</view>
				<view class="gift-itme" v-if="levelList[curIndex].sign_red!=0">
					<image src="/static/red_packet.png" mode="aspectFit"></image>
					<view class="gift-content active">
						<text>红包礼包</text>
						<text class="gift-desc">签到成功赠送{{levelList[curIndex].sign_red}}元红包</text>
					</view>
				</view>
				<view class="gift-itme">
					<image src="/static/coupon.png" mode="aspectFit"></image>
					<view class="gift-content">
						<text>优惠券礼包</text>
						<text class="gift-desc">签到成功赠送{{levelList[curIndex].coupon_name}}</text>
					</view>
				</view>
			</view>
		</view>

		

		<!-- <to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
		<loading-cover ref="loadingCover"></loading-cover>
		<ns-login ref="login"></ns-login> -->
	</view>
</template>

<script>

	import nsProgress from '@/components/ns-progress/ns-progress.vue';
	export default {
		components: {
			nsProgress,
		},
		data() {
			return {
				couponPopList: [],
				curIndex: 0,
				descIndex: 0,
				isDescAnimating: false,
				scaleX: (634 / 540).toFixed(4),
				scaleY: (378 / 330).toFixed(4),
				swiperConfig: {
					indicatorDots: false,
					indicatorColor: 'rgba(255, 255, 255, .4)',
					indicatorActiveColor: 'rgba(255, 255, 255, 1)',
					interval: 3000,
					duration: 300,
					circular: false,
					previousMargin: '58rpx',
					nextMargin: '58rpx'
				},
				levelList: [{
					needGrowth: 0,
					growth: 0
				}],
				levelId: 0,
				growth: 0,

				nowIndex: 0, //我当前所在等级的index
				rule: [] ,//成长值规则
				memberInfo:''
			};
		},
		computed: {
			listLen() {
				return this.levelList.length;
			},
			remark() {
				if (this.levelList[this.curIndex]) {
					return this.levelList[this.curIndex].remark;
				}
			},
			nextIndex() {
				if (this.curIndex == this.levelList.length - 1) {
					return this.curIndex;
				} else {
					return this.curIndex + 1;
				}
			}
		},
		onLoad() {
			// this.getLevelRule();
			this.getLevelList();
			// #ifdef MP-ALIPAY
			this.scaleX = 1
			this.scaleY = 1
			// #endif
		},
		onShow() {
		},
		filters: {
			rate(index, list, growth) {
				let nowGrowth = Number(growth);
				let minGrouth = Number(list[index].growth);
				if (index == list.length - 1) {
					return nowGrowth > minGrouth ? 100 : 0;
				} else {
					let maxGrouth = Number(list[index + 1].growth);
					let num2 = nowGrowth - minGrouth;
					let num1 = maxGrouth - minGrouth;
					let num = Math.floor((num2 / num1) * 100);
					return num > 100 ? 100 : num;
				}
			}
		},
		methods: {
			swiperChange(e) {
				let that = this;
				this.curIndex = e.detail.current;
				this.isDescAnimating = true;
				let timer = setTimeout(function() {
					that.descIndex = e.detail.current;
					clearTimeout(timer);
				}, 150);
			},
			animationfinish(e) {
				this.isDescAnimating = false;
			},
			getBannerDetail(index) {
				uni.showLoading({
					title: '将前往详情页面',
					duration: 2000,
					mask: true
				});
			},
			getLevelList() {
				let that = this
				that.tui.request("api.auth.live/consumptionLevelInfo", "POST", {}, false, false, true).then((res) => {
					if(res.code==1){
						that.memberInfo = res.data
						that.levelList = res.data.list
						that.levelId = that.memberInfo.level_id;
						that.growth = that.memberInfo.upgrade_amount;
						for (var i = 0; i < that.levelList.length; i++) {
							that.levelList[i].bg_color = '#333';
							that.levelList[i].level_picture = '';
						}
						for (let i = 0; i < that.levelList.length; i++) {
							if (that.levelList[i].id == that.levelId) {
								that.curIndex = i;
								that.descIndex = i;
								that.nowIndex = i;
								break;
							}
						}
						that.levelList.forEach((v, i) => {
							if (parseFloat(v.last_upgrade_amount) < parseFloat(that.growth)) {
								v.needGrowth = 0;
								v.rate = 100;
							} else {
								v.needGrowth = (parseFloat(v.last_upgrade_amount) - parseFloat(that.growth)).toFixed(2);
								v.rate = (that.growth / v.last_upgrade_amount).toFixed(2) * 100;
							}
						});
					}
				}).catch((res) => {
				
				})
			
			},
			getLevelRule() {
				this.$api.sendRequest({
					url: '/api/member/accountrule',
					success: res => {
						if (res.code == 0 && res.data && res.data.growth) {
							this.rule = res.data.growth;
						}
					}
				});
			},
			growthRules() {
				this.$util.redirectTo('/pages_tool/member/level_growth_rules');
			},
			openCoupon(data) {
				this.couponPopList = [];
				this.$api.sendRequest({
					url: '/coupon/api/coupon/couponbyid',
					data: {
						id: data
					},
					success: res => {
						if (res.code >= 0) {
							this.couponPopList = res.data;
						}
					}
				});
				this.$refs.couponPopup.open();
			},
			closeCoupon() {
				this.$refs.couponPopup.close();
			}
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			this.$util.redirectTo('/pages/member/index');
			return true;
		},
		watch: {
			storeToken: function(nVal, oVal) {
				if (nVal) {
					this.getLevelList();
				}
			}
		}
	};
</script>

<style lang="scss">
	@import './level.scss';
</style>